<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./lib/vue-2.6.12.js"></script>
    <script src="./lib/axios.js"></script>
    <title>8axios发起post请求</title>
  </head>
  <body>
    <button id="postInfo">发起post请求</button>
    <button id="getInfo">发起get请求</button>
    <script>
      document.querySelector("#postInfo").addEventListener('click', async function () {
        // 如果调用某个方法的返回值是Promise实例，则前面可以添加await
        // await 只能用在async修饰得到方法中 
       const {data} =  await  axios({
          method: "POST",
          url: "http://www.liulongbin.top:3006/api/post",
          data: {
            name:'shen',
            age:20
          },
        })
        console.log(data);
      });

    document.querySelector("#getInfo").addEventListener('click', async function(){
        // 结构赋值的时候，使用   :  进行重命名
        // 1.调用axios之后使用async和await进行简化
        // 2.使用解构赋值，从axios封装的大对象中，把data属性解构出来
        // 3.把结构出来的data属性，使用冒号进行重命，一般都为{data:res}
        const {data:res} = await axios({
        method:"GET",
        url:"http://www.liulongbin.top:3006/api/getbooks",
        params:{
          
        }
      });
      console.log(res.data)
    })
      
    </script>
  </body>
</html>
